<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'xiugai.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.css">
    <script type="text/javascript" src="bootstrap-3.3.7/js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript">

		
    
   	//修改提交方法
	    function xiugai(){
	    	var sid = $("[name='sid']").val();
	    	var sname = $("[name='sname']").val();
	    	var sex = $("[name='sex']").val();
	    	var age = $("[name='age']").val();
	    	var hobby = $("[name='ck']:checked").map(function(){
	    		return this.value;
	    	}).get().join();
	    	var ectur = $("[name='ack']:checked").map(function(){
	    		return this.value;
	    	}).get().join();
	    	var rang = $("[name='bck']:checked").map(function(){
	    		return this.value;
	    	}).get().join();
	    		$.post(
	    			"updatestudent",
	    			{
	    				"sid":sid,
	    				"sname":sname,
	    				"sex":sex,
	    				"age":age,
	    				"hobby":hobby,
	    				"ectur":ectur,
	    				"rang":rang
	    			},
	    			function(obj){
	    				if(obj){
	    					alert("修改成功！");
	    					location = "getlist";
	    				}
	    			},
	    			"json"
	    		);
	    }
	    	
	    	//爱好复选框的全选反选
	    	function ah(){
	    		var flag = false;
	    		if($("#aa").is(":checked")){//判断复选框是否被选中
	    			flag = true;
	    		}
	    		if(flag){
	    			$("[name='ck']").each(function(){
	    				this.checked = true;
	    			})
	    		}else{
	    			$("[name='ck']").each(function(){
	    				this.checked = false;
	    			})
	    		}
	    	}
    	
    	
    	
	    	//部门复选框的全选反选
	    	function bm(){
	    		var flag = false;
	    		if($("#bb").is(":checked")){
	    			flag = true;
	    		}
	    		if(flag){
	    			$("[name='ack']").each(function(){
	    				this.checked = true;
	    			})
	    		}else{
	    			$("[name='ack']").each(function(){
	    				this.checked = false;
	    			})
	    		}
	    	}
	    	
	    	
	    	
	    	//职位复选框的全选反选
	    	function zw(){
	    		var flag = false;
	    		if($("#cc").is(":checked")){
	    			flag = true;
	    		}
	    		if(flag){
	    			$("[name='bck']").each(function(){
	    				this.checked = true;
	    			})
	    		}else{
	    			$("[name='bck']").each(function(){
	    				this.checked = false;
	    			})
	    		}
	    	}
	    	
	    	
	    	//复选框回显爱好
    		$(function(){
    			var hobbys = $("[name='hobbys']").val();
    			var h=hobbys.split(",");
					for(var i=0; i<h.length; i++ ){
						$("[name='ck'][value='"+h[i]+"']").attr("checked",true);
					} 
    })
    
    		//复选框回显部门
    		$(function(){
    			var ectur = $("[name='ectur']").val();
    			var h=ectur.split(",");
					for(var i=0; i<h.length; i++ ){
						$("[name='ack'][value='"+h[i]+"']").attr("checked",true);
					} 
    	})
    
    		//复选框回显职位
    		$(function(){
    			var rang = $("[name='rang']").val();
    			var h=rang.split(",");
					for(var i=0; i<h.length; i++ ){
						$("[name='bck'][value='"+h[i]+"']").attr("checked",true);
					} 
    	}) 
    
	</script>

  </head>
  
  <body>
    <p style="font-size: 30px;text-align: center;">修改页面</p>
    	<input name="sid" value="${sid}" type="hidden"><br>
    	姓名：<input name="sname" value="${stu.sname}"><br>
  	            性别：<input name="sex" value="${stu.sex}"><br>
  	            年龄：<input name="age" value="${stu.age}"><br>
  	            爱好：<br><span name="sp"></span>
  	    <input type="hidden" value="${stu.hobby }" name="hobbys">
  	    <input type="hidden" value="${stu.ectur }" name="ectur">
  	    <input type="hidden" value="${stu.rang }" name="rang">
        <ul>  
            <li>
            	<input type="checkbox" onclick = "ah()" id = "aa" > 爱好
                <ul>    
                	<li>
                	<c:forEach items="${hob }" var="h">
                        <input type='checkbox' name='ck' value="${h.hname }" >${h.hname }
                    </c:forEach>
                    </li> 
                </ul>  
             </li>
             <li>
            	<input type="checkbox" onclick = "bm()" id = "bb" > 部门
                <ul>    
                	<li>
                        <c:forEach items="${ect }" var="e">
                        <input type='checkbox' name='ack' value="${e.ename }" >${e.ename }
                    	</c:forEach>
                    </li> 
                </ul>  
             </li>
             <li>
            	<input type="checkbox" onclick = "zw()" id = "cc" > 职位
                <ul>    
                	<li>
                        <c:forEach items="${ran }" var="r">
                        <input type='checkbox' name='bck' value="${r.rname }" >${r.rname }
                    	</c:forEach>
                    </li> 
                </ul>  
             </li>
         </ul>
    	<button class="btn btn-primary" onclick="xiugai()">提交修改</button>   
  </body>
</html>
